<template>
  <el-dialog :title=" showTitle" :visible.sync="abc">
    <el-form ref="addData" :model="formdata" :rules="rules" label-width="80px">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model="formdata.name" placeholder="请输入部门名称"></el-input>
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="formdata.code" placeholder="请输入部门编码"></el-input>
      </el-form-item>
      <el-form-item prop="managerId" label="部门负责人">
        <el-select v-model="formdata.managerId" placeholder="请选择负责人">
          <el-option v-for="data in managerList" :key="data.id" :label="data.username" :value="data.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="formdata.introduce" placeholder="请输入部门介绍"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-col :span="6">
        <el-button size="mini" type="primary" @click="btnok">确 定</el-button>
        <el-button size="mini" @click="handleCancel">取 消</el-button>
      </el-col>
    </span>
  </el-dialog>
</template>
<script>
import { addmanagerList, getdepartmentdetail, updatadepartmentdetail, getDepartment } from '@/api/department'
export default {

  name: 'Operation',
  props: {
    // 规范一点，就不能叫abc  hahah
    abc: {
      type: Boolean,
      default: false
    },
    nodeId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {

      managerList: [],
      formdata: {
        name: "",
        code: "",
        introduce: "",
        managerId: "",
        pid: ""
      },

      rules: {
        name: [
          { required: true, message: '请输入新增部门的名称', trigger: 'blur' },
          { min: 2, max: 5, message: '输入的名称在2-5之间', trigger: 'blur' },
          {
            validator: async (rules, value, callback) => {
              try {
                let result = await getDepartment(); // 调用 API 获取部门数据
                if (this.formdata.id) {
                  // 编辑模式，移除当前部门
                  result = result.filter(item => item.id !== this.formdata.id);

                }
                // 检查是否存在重复的部门名称
                if (result.some(item => item.name === value)) {
                  callback(new Error('部门编码已经存在'));
                } else {
                  callback(); // 通过校验
                }
              } catch (error) {
                callback(new Error('获取部门数据失败')); // 处理异常情况
              }
            }
          }
        ],


        code: [{ required: true, message: '请输入新增部门的编码', trigger: 'blur' }
          , { min: 2, max: 5, message: '输入的编码在2-5之间', trigger: 'blur' },
        {
          validator: async (rules, value, callback) => {
            let result = await getDepartment()
            if (this.formdata.id) {
              //编辑模式
              result = result.filter(item => item.id !== this.formdata.id)
            } if (result.some(item => item.code === value)) {
              callback(error('部门名称已经存在'))

            } else {
              callback()
            }
          }

        }

        ],

        managerId: [{ required: true, message: '请选择负责人', trigger: 'blur' }

        ],

        introduce: [{ required: true, message: '请输入部门的介绍', trigger: 'blur' }
          , { min: 5, max: 100, message: '输入的名称在5-100字之间', trigger: 'blur' }

        ],

      }

    }
  },
  created() {
    this.addmanagerList()
  },
  methods: {
    // 取消弹窗
    handleCancel() {
      // 子组件不能直接父组件传递过来的值,要通过子传父
      // 是吗 是的,但是命名规范一些
      // 确定去父组件 监听这个cancel事件,然后关闭弹窗  是吗
      this.$emit('cancel', false)
    },
    // 确定按钮
    async addmanagerList() {
      try {
        const res = await addmanagerList()
        this.managerList = res
        console.log('@@2', this.managerList);
      } catch (error) {
        console.log('获取列表失败', error);

      }


    },
    btnok() {
      this.$refs.addData.validate(async (valid) => {
        if (valid) {
          const params = {
            ...this.formdata, id: this.formdata.id
          }
          if (this.formdata.id) {

            console.log('我是参数', this.formdata);
            await updatadepartmentdetail(params)
            this.handleCancel()
            this.$emit('getlist')
          } this.$emit('submitdata', this.formdata, this.nodeId)
        } else {
          //新增场景

        }

      });
    },
    cleanMassage() {
      this.formdata = {
        name: "",
        code: "",
        introduce: "",
        managerId: "",
        pid: ""
      };
    },
    async getdepartmentdetail(nodeId) {
      try {
        console.log('shsgs', nodeId);

        const res = await getdepartmentdetail(nodeId)
        this.formdata = res
        console.log('888666', res);
      } catch (error) {
        console.log('获取部门详情失败', error);
      }
    }

  },
  computed: {
    showTitle() {
      console.log('22222', this.formdata);

      return this.formdata.id ? '编辑部门' : '新增部门'

    }
  }
}



</script>
<style>
.dialog-footer {
  display: flex;
  margin-left: "400px", align= "middle";
}
</style>